<template>
  <div class="auction-bid-list-container">
    <div class="search-form">
      <el-form :inline="true" :model="searchForm" ref="searchFormRef" class="search-form-content">
        <div class="left-items">
          <el-form-item label="拍卖品名称" prop="auctionTitle">
            <el-input v-model="searchForm.auctionTitle" placeholder="请输入拍卖品名称"></el-input>
          </el-form-item>
          <el-form-item label="买家姓名" prop="buyerName">
            <el-input v-model="searchForm.buyerName" placeholder="请输入买家姓名"></el-input>
          </el-form-item>
          <el-form-item label="竞价状态" prop="status">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="领先" :value="0"></el-option>
              <el-option label="被超越" :value="1"></el-option>
              <el-option label="竞拍成功" :value="2"></el-option>
              <el-option label="竞拍失败" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <el-table :data="bidList" style="width: 100%" v-loading="loading">
      <el-table-column type="index" label="序号" width="120" align="center"></el-table-column>
      <el-table-column prop="auctionTitle" label="拍卖品名称" width="200" />
      <el-table-column prop="image" label="拍卖品图片" width="200">
        <template #default="scope">
          <el-image v-if="scope.row.image" style="width: 100px; height: 100px" :src="scope.row.image"
            :preview-src-list="[scope.row.image]" fit="cover" />
          <span v-else>暂无图片</span>
        </template>
      </el-table-column>
      <el-table-column prop="bidPrice" label="竞价金额" width="160">
        <template #default="scope">
          <span class="price">
            ￥{{ scope.row.bidPrice }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="buyerName" label="竞价用户" width="160" />
      <el-table-column prop="bidTime" label="竞价时间" width="230" />
      <el-table-column prop="status" label="竞价状态" min-width="160">
        <template #default="scope">
          <el-tag
            :type="scope.row.status === 0 ? 'success' : scope.row.status === 1 ? 'info' : scope.row.status === 2 ? 'warning' : 'danger'">
            {{ scope.row.status === 0 ? '领先' : scope.row.status === 1 ? '被超越' : scope.row.status === 2 ? '竞拍成功' : '竞拍失败'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button @click="viewUserBids(scope.row.userId)" size="small" type="primary">用户竞价</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="searchForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="searchForm.pageSize" :total="total"
        layout="total, sizes, prev, pager, next, jumper" />
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getAuctionBids } from '@/api/bid'

export default {
  name: 'AuctionBidList',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const bidList = ref([])
    const loading = ref(false)
    const total = ref(0)
    const searchFormRef = ref(null)

    // 搜索表单
    const searchForm = reactive({
      auctionTitle: '',
      buyerName: '',
      status: '',
      page: 1,
      pageSize: 10
    })

    // 加载竞价列表
    const loadBidList = async () => {
      loading.value = true
      try {
        const res = await getAuctionBids(searchForm)
        if (res.code === 1) {
          bidList.value = res.data.records || []
          total.value = res.data.total || 0
        } else {
          ElMessage.error(res.msg || '加载竞价记录失败')
        }
      } catch (error) {
        console.error('加载竞价记录失败:', error)
        ElMessage.error('加载数据失败，请稍后重试')
      } finally {
        loading.value = false
      }
    }

    // 搜索
    const handleSearch = () => {
      searchForm.page = 1
      loadBidList()
    }

    // 重置搜索
    const resetSearch = () => {
      searchFormRef.value?.resetFields()
      searchForm.page = 1
      loadBidList()
    }

    // 查看用户的竞价记录
    // const viewUserBids = (userId) => {
    //   router.push({
    //     name: 'UserBidList',
    //     params: { userId }
    //   })
    // }

    // 改变每页显示数量
    const handleSizeChange = (size) => {
      searchForm.pageSize = size
      searchForm.page = 1
      loadBidList()
    }

    // 改变页码
    const handleCurrentChange = (page) => {
      searchForm.page = page
      loadBidList()
    }

    onMounted(() => {
      loadBidList()
    })

    return {
      bidList,
      loading,
      total,
      searchForm,
      searchFormRef,
      handleSearch,
      resetSearch,
      //viewUserBids,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.auction-bid-list-container {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-items {
  flex: 1;
}

.price {
  color: #ff6b00;
  font-weight: bold;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>